h4 제목

# h1 제목
## h2 제목
### h3 제목
#### h4 제목
##### h5 제목
###### h6 제목

글머리 기호

Markdown에서 글머리 기호 목록(lists)을 만들려면 더하기 기호, 하이픈 또는 별표를 사용할 수 있습니다. 세 가지 방법 모두 동일한 결과를 생성합니다. 하위 수준 목록을 만들려면 4개의 공백 들여쓰기를 사용하면 됩니다.

Example:

• item 1
• item 2
  • sub-item 2.1
  • sub-item 2.2
• item 3
  • sub-item 3.1
  • sub-item 3.2

* item 1
* item 2
    + sub-item 2.1
    + sub-item 2.2
* item 3
    + sub-item 3.1
    + sub-item 3.2

글머리 번호

글머리 번호 목록은 마침표를 포함한 숫자로 생성됩니다. 하위 수준 목록을 만들려면 4개의 공백 들여쓰기를 사용하면 됩니다.

Example:

1. item 1
2. item 2
   1. item 2.1
   2. item 2.2
3. item 3
   1. item 3.1
   2. item 3.2

1. item 1
2. item 2
    1. item 2.1
    2. item 2.2
3. item 3
    1. item 3.1
    2. item 3.2

혼합 목록

글머리 기호와 글머리 번호 모두 사용하여 혼합 목록을 생성합니다. 하위 수준 목록을 만들려면 4개의 공백 들여쓰기를 사용하면 됩니다.

Example:

1. item 1

• item 2
  1. item 2.1
  2. item 2.2

3. item 3
   • item 3.1
   • item 3.2

1. item 1
* item 2
    1. item 2.1
    2. item 2.2
3. item 3
    * item 3.1
    * item 3.2

Helper 클래스와 이미지

전체 너비 이미지는, 특히 세로 방향 사진의 경우 레이아웃에 가장 적합한 옵션이 아닐 수 있습니다. 이미지 및 캡션 주위에 .img50(max-width: 50%) 또는 .img75(max-width: 75%) 클래스를 사용하여 크기를 줄입니다.

Example:

:::{.img50}
![Placeholder](img/169_pics_landscape.png)
*이미지 캡션 텍스트. © KRUG Photographer 이름*
:::

.float-start 또는 .float-end 클래스와 결합하여 페이지의 특정 사이드에 이미지를 정렬하고, 그 주위에 텍스트를 포함할 수도 있습니다. 이 경우에, 이미지와 캡션은 더 이상 텍스트 흐름의 일부가 아니므로 플로팅(float) 사용에 주의해야 합니다. 따라서 뒤에 오는 모든 텍스트 내용은 이미지 아래가 아니라 이미지 옆에 배치됩니다.

:::{.clearfix}
:::{.img50 .float-end}
![Placeholder](img/169_pics_landscape.png)
*이미지 캡션 텍스트. © KRUG Photographer 이름*
:::
대법원장과 대법관이 아닌 ..., 이미지 옆에 배치될 텍스트
:::

플롯

R 스크립트로 직접 생성한 플롯을 임베드할 수도 있습니다. KRUG 브랜드에 따라 차트를 생성하는 방법에 대한 자세한 내용은 ggplot2에 대한 bit_theme의 비네트를 검토하세요.

R Markdown 문서 상단의 YAML에서 그림 목록(List of figure)이 활성화된 경우, 코드 청크 매개변수에 fig.cap을 포함해야 합니다. 매개변수에 매핑된 텍스트는 캡션 자체와 그림 목록의 이름에 사용됩니다.

Figure 1: 항공기 이용 승객 현황 - 국제선 항공기 이용고객의 월 집계

플롯 자체만 출력되고, R 코드가 문서에 출력되는 것을 방지하기 위해서 echo = FALSE 매개변수를 코드 청크에 추가합니다.

이미지에서와는 달리 플롯의 크기는 out.width 매개변수로 코드 청그에 추가합니다. out.width="75%"와 같은 상대 측정값을 사용하는 것이 좋습니다. ‘left’, ‘center’ 또는 ’right’로 설정한 fig.align 태그를 사용하여 코드 청크 매개변수에서 플롯의 정렬을 설정할 수도 있습니다.

Figure 2: 항공기 이용 승객 년도별 비교 - 국제선 항공기 이용고객의 월 집계

테이블

문서에 테이블(tables)을 포함할 수도 있습니다. 가장 쉬운 방법은 Rmd 파일의 코드 청크에 포함된 knitr 패키지의 kable 함수를 사용하는 것입니다. bitR 스타일을 포함하려면 .table 클래스에 대한 선언을 kable 함수의 매개변수에 추가해야 합니다.

예를 들면, KRUG 스타일의 테이블을 출력하기 위한 아래 코드의 knitr::kable(data_frame_name, table.attr = "class=\"table\"", format = "html")을 참고하세요. 이스케이프문자에 주의하세요. 이것은 따옴표 안에 따옴표로 구성된 텍스트를 표현하기 위해서 사용합니다. format="html" 매개변수는 출력형식을 HTML로 지정합니다.

Example:

테이블을 편집하는 방법에는 2가지가 있습니다. kable 함수의 일부 매개변수를 사용하거나 table.attr 매개변수에 CSS 클래스를 추가하는 것입니다.

kable 함수는 주로 숫자 서식 지정, 열 이름 변경 또는 캡션 추가와 같이 테이블 자체의 내용에 영향을 줍니다. 추가적인 사용 방법에 대해서는 bookdown pagehttps://bookdown.org/yihui/rmarkdown-cookbook/kable.html#customize-html-tables을 참고하세요.

Example:

knitr::kable(usa_crime,
             table.attr = "class=\"table\"",
             format = "html",
             col.names = c('주 이름', '살인범수 (10만명당)', '폭행범수 (10만명당)', 
                           '도시인구 비율 (%)', '강간범수 (10만명당)'),
             format.args = list(big.mark = ",", scientific = FALSE),
             caption = "미국 주별 강력 범죄율")

table.attr 매개변수에 CSS 클래스를 추가하면 테이블 스타일에만 영향을 미칩니다.

사용 가능한 CSS 클래스 목록은 다음과 같습니다.:

• .table: bitR 스타일을 적용합니다. 거의 필수적입니다.
• .table-striped: 홀수 행에 밝은 회색 배경을 적용합니다.
• .table-striped-blue: 홀수 행에 연한 파란색 배경을 적용합니다.
• .table-striped-orange: 홀수 행에 연한 주황색색 배경을 적용합니다.
• .table-width: 기본 너비인 100%를 제거하고 테이블 내부의 데이터에 필요한 너비를 적용합니다.
• .table-bordered: 표와 셀 전체에 테두리를 적용합니다.
• .table-borderless: 모든 테두리를 제거합니다.

Example:

knitr::kable(usa_crime,
             table.attr = "class=\"table table-striped-blue table-width\"",
             format = "html",
             format.args = list(big.mark = ",", scientific = FALSE),
             caption = "미국 주별 강력 범죄율")

글자 색상

.custom-orange, .custom-blue 또는 .custom-grey 클래스를 추가하면 bitR 브랜드 색상을 텍스트 요소에 적용할 수 있습니다. 앞서 언급했듯이 이것은 분리된 div와 인라인 요소 모두 적용됩니다.

Example:

파란색, 오렌지색, 회색으로 표현됩니다. bold처럼 다른 인라인 스타일과 혼합이 가능합니다.

[파란색]{.custom-blue}, [오렌지색]{.custom-orange}, [회색]{.custom-grey}으로 표현됩니다. **[bold]{.custom-blue}**처럼 다른 인라인 스타일과 혼합이 가능합니다.

배경 색상

배경색(background color) helper 클래스로 쉽게 글상자를 생성합니다. 밝은 파랑(.bg-blue), 밝은 오렌지(.bg-orange)과 밝은 회색(.bg-grey)을 채웁니다. 이들은 박스 여백인 패딩과 함께 적용됩니다. 이 클래스는오직 분리된 div 요소에만 적용됩니다.

Example:

# Blue example
:::{.bg-blue}
대법원장과 대법관이 아닌 법관의,...
:::
  
# Grey example
:::{.bg-grey}
대법원장과 대법관이 아닌 법관의,...
:::

열 나누기

.col2 클래스는 여는 태그 :::{.col2}와 닫는 태그 ::: 사이의 콘텐츠를 2열 레이아웃으로 조판합니다.이것은 텍스트에만 사용을 권장합니다. 이미지 또는 플롯을 포함하는 더 복잡한 레이아웃의 경우 문서는 플로팅 섹션을 참조하고 예제는 Helper 클래스와 이미지 부분을 참조하십시오.

예제는 도우미 클래스 및 이미지를 참조하세요.

Example:

:::{.col2}
국회의 회의는 공개한다. 다만, 출석의원 과반수의 찬성이 있거나 의장이 국가의 안전보장을 위하여 필요하다고 인정할 때에는 공개하지 아니할 수 있다. 군인은 현역을 면한 후가 아니면 국무위원으로 임명될 수 없다. 
:::

플로팅

플로팅(Floats) 클래스는 float CSS 속성을 사용하여 텍스트 요소를 왼쪽이나 오른쪽으로 배치합(띄웁)니다.

컨테이너 안의 플로팅 해제를 빠르고 쉽게하기 위해서 .clearfix 클래스를 사용하여 것이 좋습니다. 예제처럼 내부 요소에 .clearfix를 적용하면 플로팅 요소 이후에 콘텐츠 흐름이 정상으로 돌아갑니다. Helper 클래스와 이미지를 참조하세요.

Example:

# 정상적인 콘텐츠 흐름을 재생성하려면 Clearfix가 필요합니다.
:::{.clearfix}
:::{.float-start}
이것은 플로트의 시작(페이지의 왼쪽)이 될 것입니다.
:::
:::
  
:::{.clearfix} 
:::{.float-end}
이것은 플로트의 끝(페이지의 오른쪽)이 될 것입니다.
:::
:::

페이지 나누기

템플릿은 콘텐츠가 페이지에 맞지 않을 때 자동으로 페이지 나누기(page break)를 만듭니다. 그러나 경우에 따라서 특정 위치를 기준으로 페이지를 강제로 나눌 필요가 있습니다. .page-break 클래스로 분리된 div를 만들면 이후의 콘텐츠는 다음 페이지로 보내집니다. .page-break 클래스를 플로팅 요소와 함께 사용하지 마세요.

Example:

# 내용을 모두 다음 페이지로 넘기기 위해서 빈 div를 만듭니다.
:::{.page-break}
:::